<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
        <title>请选择银行</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
        <meta name="format-detection" content="telephone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!-- 避免IE使用兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
        <meta name="HandheldFriendly" content="true">
        <!-- 微软的老式浏览器 -->
        <meta name="MobileOptimized" content="320">
        <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">
        <!-- UC强制全屏 -->
        <meta name="full-screen" content="yes">
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true">
        <!-- UC应用模式 -->
        <meta name="browsermode" content="application">
        <!-- QQ应用模式 -->
        <meta name="x5-page-mode" content="app">
        <!-- windows phone 点击无高光 -->
        <meta name="msapplication-tap-highlight" content="no">
        <title>支付</title>
        <link rel="stylesheet" type="text/css" href="__HOME__/bankPaySelect/css/global.css" />
        <link rel="stylesheet" type="text/css" href="__HOME__/bankPaySelect/css/index.css" />
        <script type="text/javascript" src="__HOME__/bankPaySelect/js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="__HOME__/bankPaySelect/js/index.js"></script>
        <script type="text/javascript">
         $(function () {
             // 第一次银行显示
             var defaultbankCode = '{$bankcode}';
             if(defaultbankCode != ''){
                 var imgObj = $("img[name='{$bankcode}']");
                 $("input[name='BankType']").val(defaultbankCode);
                 var ImgPath = imgObj.attr('src');
                 var OneimgObj = $("#bankimg");
                 OneimgObj.attr('src' , ImgPath);
                 OneimgObj.attr('name' , defaultbankCode);
                 var OnebankName = imgObj.next().html();
                 OneimgObj.next().html(OnebankName);
             }
             // 第一次银行显示 The End

             var myCardObj = $("#MyCard");
             var ppppz = $("#voucher").val(); // 添加和查看凭证
             $(".btn_box").bind('click',function () {
//                 $("input[name='bank_name']").attr('value' , bank_name);
                 $("#TheFrom").submit();
             });

             $('.layer_box li').click(function(event) {
                 var BankCode =  $(this).find('img').attr('name');
                 $("#MyCard").empty();
                 $.post("{:U('BankCardNum/BankCardNumInfo')}",{"bankcode" : BankCode,"voucherData" : ppppz},function(result){
                     if(result.error != 0 && result.error != 2){
                         alert(result.msg);
                         return false;
                     }
                     for (var i=0;i<result.data.length;i++)
                     {
                         var aaa = ' <div class="kac"> 卡号 <span>'+ result.data[i].bankaccount +'</span> <em class="delCard">删除</em> <em>&nbsp;&nbsp;</em> <em class="yjfz">一键复制</em> </div>';
                         myCardObj.append(aaa);
                     }

                 },'json');
             });

             // 删除事件
             $(document).on('click','.delCard', function(event) {
                 var obj = $(this);
                 var DelCardNum = obj.parent().find('span').html();
                 $.post("{:U('BankCardNum/BankCardNumDel')}",{"BankAccount" : DelCardNum , "voucherData" : ppppz},function(result){
                     if(result.error == 0) {
                         obj.parent().remove();
                         alert('删除成功');
                     }else{
                         alert(result.msg);
                     }
                 },'json');
             });

             $(".btn_po").bind('click',function () {
                 var bankCardNum = $("#BankCardNumContent").val();
                 var reg = /^\d{19}$/g;   // 以19位数字开头，以19位数字结尾
                 if( !reg.test(bankCardNum) ){
                     alert('银行卡号格式错误');
                     return false;
                 }

                     var bankCode =  $(".chose_box").find('img').attr('name');

                 $.ajax({
                      url : "{:U('BankCardNum/BankCardNumAdd')}",
                      type : 'post',
                      data : {
                          'voucherData' : ppppz,
                          'BankAccount' : bankCardNum ,
                          'bankcode' :  bankCode
                      },
                      dataType : 'json',
                      cache  : false,
                      success : function (data) {
                         if(data.error == 0) {
                             myCardObj.append('<div class="kac"> 卡号 <span>'+ bankCardNum +'</span> <em class="delCard">删除</em> <em>&nbsp;&nbsp;</em>  <em class="yjfz">一键复制</em></div>');
                             $("#BankCardNumContent").val('');
                             alert('添加卡号成功');
                         }else{
                             alert(data.msg);
                         }
                      }
                 });

             });

         });
      </script>
  </head>
  <body>
  <div class="djs" id="getcode" value="有效倒计时">有效时间</div>
  <input type="hidden" value="{$CXvoucher}" id="voucher">
    <div class="wrap">
      <div class="zip">支付金额</div>
      <div class="jine">￥<span>{$money}</span></div>
      <div class="zu">
      <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" id="TheFrom">
        <input type="hidden" value="CMB" name="BankType">
        <input type="hidden" value="{$payInfo}" name="i">
        <div class="chose_box">
          <img src="../../../../Public/Api/bankPaySelect/images/1.png" id="bankimg" name="CMB" alt="" />
          <span>招商银行</span>
          <div class="right_box"></div>
        </div>
      </form>
        <div id="MyCard">
          <foreach name="OneBankDatas" item="OneBankData">
            <div class="kac"> 卡号 <span>{$OneBankData.bankaccount}</span> <em class="delCard">删除</em> <em>&nbsp;&nbsp;</em>  <em class="yjfz">一键复制</em></div>
          </foreach>
        </div>
        <div class="tianjia"><img src="../../../../Public/Api/bankPaySelect/images/cardl.png" alt="" class="card"/><span>添加银行卡...</span> <img src="../../../../Public/Api/bankPaySelect/images/jia.png" alt="" class="jia"/></div>
      </div>
      <div class="btn_box">付款</div>
    </div>
    <!-- 选择银行 -->
    <div class="layer">
      <div class="layer_box">
        <ul>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/1.png" name="CMB" />
            <p>招商银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/2.png" name="CCB" />
            <p>建设银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/3.png" name="BOC" />
            <p>中国银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/4.png"  name="ABC"/>
            <p>农业银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/5.png" name="BOCM"/>
            <p>交通银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/6.png" name="SPDB"/>
            <p>浦发银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/7.png" name="CGB"/>
            <p>广发银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/8.png" name="CITIC"/>
            <p>中信银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/9.png" name="CEB"/>
            <p>光大银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/10.png" name="CIB"/>
            <p>兴业银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/11.png" name="PAYH"/>
            <p>平安银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/12.png" name="CMBC" />
            <p>民生银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/13.png" name="HXB"/>
            <p>华夏银行</p>
          </li>
          <!--<li>-->
            <!--<img src="../../../../Public/Api/bankPaySelect/images/14.png" name="" />-->
            <!--<p>邮政银行</p>-->
          <!--</li>-->
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/15.png"  name="BCCB"/>
            <p>北京银行</p>
          </li>
          <li>
            <img src="../../../../Public/Api/bankPaySelect/images/16.png" name="SHBANK"/>
            <p>上海银行</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 添加银行卡弹框 -->
    <div class="layer2">
      <div class="layer2_box">
        <div class="guan">关闭</div>
        <input type="text" id="BankCardNumContent" placeholder="请输入您的银行卡号" />
        <div class="btn_po">保存</div>
      </div>
    </div>
  </body>
</html>
